<template>
  <div>
    <van-nav-bar :title="$route.name" />
    <!-- 个人资料 通过是否登录来判断当前组件视图的渲染内容 -->
    <!-- 已登录状态 -->
    <div v-if="getUser" class="userinfo">
      <van-image round width="80px" height="80px" :src="getUser.avatarurl" />
      <p>{{getUser.nickname}}</p>
      <van-button @click="logout" type="primary" size="small"
        >退出登录
      </van-button>
    </div>
    <div class="userinfo" v-else>
      <van-image
        round
        width="80px"
        height="80px"
        src="https://img1.baidu.com/it/u=1244239780,4153872155&fm=26&fmt=auto"
      />
      <p>XXX</p>
      <van-button @click="$router.push('/login')" type="primary" size="small"
        >去登录
      </van-button>
    </div>
    <!-- 单元格展示 -->
    <van-cell icon='location-o' title="地址管理" is-link to="/address"/>
    <van-cell icon='balance-o' title="我的钱包" is-link />
    <van-cell icon='scan' title="我二维码" is-link />
    <van-cell icon='friends-o' title="我的小伙伴" is-link />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
     ...mapGetters(["getUser"]),
  },
  methods: {
    //封装一个退出事件
    logout() {
      this.$store.dispatch("changeUser", false);
    },
  },
};
</script>

<style scoped>
.userinfo {
  text-align: center;
}
</style>
